@import '../common/variables.scss';

.#{$css-prefix} {
  &-button {
    display: inline-block;
    line-height: $btn-lineHeight;
    white-space: nowrap;
    cursor: pointer;
    background: $btn-default-bg;
    color: $btn-default-color;
    display: inline-block;
    line-height: $btn-lineHeight;
    white-space: nowrap;
    cursor: pointer;
    background: $btn-default-bg;
    border: 1px solid $btn-default-borderColor;
    border-color: $btn-default-borderColor;
    color: $btn-default-color;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: .1s;
    font-weight: $btn-fontWeight;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: $btn-default-padding;
    font-size: $btn-fontsize;
    border-radius: $btn-radius;
    &:focus {
      color: $btn-default-focusColor;
      border-color: $btn-default-focusBorderColor;
      background-color: $btn-default-focusbg;
    }
    &.#{$css-prefix}-button-default {
      color: $btn-default-color;
      border-color: $btn-default-borderColor;
      background-color: $btn-default-bg;
      &:focus {
        color: $btn-default-focusColor;
        border-color: $btn-default-focusBorderColor;
        background-color: $btn-default-focusbg;
      }
    }
    &.#{$css-prefix}-button-primary {
      color: $btn-primary-Color;
      border-color: $btn-primary-BorderColor;
      background-color: $btn-primary-bg;
      &:focus {
        color: $btn-primary-focusColor;
        border-color: $btn-primary-focusBorderColor;
        background-color: $btn-primary-focusbg;
      }
    }
    &.#{$css-prefix}-button-success {
      color: $btn-success-Color;
      border-color: $btn-success-BorderColor;
      background-color: $btn-success-bg;
      &:focus {
        color: $btn-success-focusColor;
        border-color: $btn-success-focusBorderColor;
        background-color: $btn-success-focusbg;
      }
    }
    &.#{$css-prefix}-button-info {
      color: $btn-info-Color;
      border-color: $btn-info-BorderColor;
      background-color: $btn-info-bg;
      &:focus {
        color: $btn-info-focusColor;
        border-color: $btn-info-focusBorderColor;
        background-color: $btn-info-focusbg;
      }
    }
    &.#{$css-prefix}-button-warning {
      color: $btn-warning-Color;
      border-color: $btn-warning-BorderColor;
      background-color: $btn-warning-bg;
      &:focus {
        color: $btn-warning-focusColor;
        border-color: $btn-warning-focusBorderColor;
        background-color: $btn-warning-focusbg;
      }
    }
    &.#{$css-prefix}-button-danger {
      color: $btn-danger-Color;
      border-color: $btn-danger-BorderColor;
      background-color: $btn-danger-bg;
      &:focus {
        color: $btn-danger-focusColor;
        border-color: $btn-danger-focusBorderColor;
        background-color: $btn-danger-focusbg;
      }
    }
    &.#{$css-prefix}-button-text {
      color: $btn-text-Color;
      border-color: $btn-text-BorderColor;
      background-color: $btn-text-bg;
      padding-left: 0;
      padding-right: 0;
      &:focus {
        color: $btn-text-focusColor;
        border-color: $btn-text-focusBorderColor;
        background-color: $btn-text-focusbg;
      }
    }
    &.#{$css-prefix}-button-medium {
      padding: $btn-medium-padding;
      font-size: $btn-medium-fontSize;
      border-radius: $btn-medium-radius;
    }
    &.#{$css-prefix}-button-small {
      padding: $btn-small-padding;
      font-size: $btn-small-fontSize;
      border-radius: $btn-small-radius;
    }
    &.#{$css-prefix}-button-mini {
      padding: $btn-mini-padding;
      font-size: $btn-mini-fontSize;
      border-radius: $btn-mini-radius;
    }
    &.is-circle {
      border-radius: $btn-circle-radius;
      padding: $btn-circle-padding;
    }
    &.is-loading {
      position: relative;
      pointer-events: none;
    }
  }
  &-button-group {
    display: inline-block;
    vertical-align: middle;
    .#{$css-prefix}-button {
      &:first-child {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      &:not(:first-child):not(:last-child) {
        border-radius: 0;
      }
      &:last-child {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}
